iT邦幫忙

2022 iThome 鐵人賽

DAY 30
1
影片教學

每天五分鐘Webduino Smart開發應用好好玩系列 第 30

第三十堂課Webduino Smart遇上Node-RED與Dashboard

  • 分享至 

  • xImage
  •  

Yes

  1. Node-Red 是IBM推出的一套架構在Node.js,使用瀏覽器介面的強大物聯網 (IoT) 開發工具,其視覺開發環境以流程 (flows) 為基礎,替代以逐行的文字語句敘述撰寫程式,使應用程式撰寫更加簡易。這些流程由相連的節點構成,每一個節點代表特定的功能。

  2. 每當啟動Node-RED時,背景程式會創造一個伺服器來處理我們輸入的指令,這時只要使用瀏覽器登入指定的IP即可進入Node-RED的編輯畫面,設定好想要的流程後,背景程式會將流程轉換成程式碼交給Node.js環境運行。

  3. Node.js是一個讀取Javascript的運行環境,可用於開發網頁後端程式。先安裝Node.js,下載LTS版。https://nodejs.org/
    https://ithelp.ithome.com.tw/upload/images/20221015/20152709Zqk4Q0u8at.png

  4. 安裝完成後,到程式集點選Node.js command prompt,跑出命令列視窗,
    輸入 npm install -g --unsafe-perm node-red ,安裝Node-RED
    輸入 npm install node-red-contrib-webduino, 安裝Webduino Node-RED 節點
    輸入 node-red ,啟動Node-RED,開啟瀏覽器輸入127.0.0.1:1880
    https://ithelp.ithome.com.tw/upload/images/20221015/20152709pqBR4gVEli.png
    https://ithelp.ithome.com.tw/upload/images/20221015/2015270995HtGHsuiP.png

Node-Red基本運作說明
https://ithelp.ithome.com.tw/upload/images/20221015/20152709ac8a1gvKBU.png
https://ithelp.ithome.com.tw/upload/images/20221015/20152709zEFgQfuawW.png

Webduino LED節點設定
https://ithelp.ithome.com.tw/upload/images/20221015/20152709tC9QJr9s7m.png
https://ithelp.ithome.com.tw/upload/images/20221015/20152709uFeXrFlbQo.png
使用inject節點輸入控制 Webduino LED四種狀態(開、關、切換、閃爍)
https://ithelp.ithome.com.tw/upload/images/20221015/20152709Sej43BdhX9.png
安裝DashBoard儀表板
https://ithelp.ithome.com.tw/upload/images/20221015/20152709Ho4RCGfPU3.png
https://ithelp.ithome.com.tw/upload/images/20221015/20152709whDKaOH6wZ.png
使用DashBoard的Button控制 Webduino LED
https://ithelp.ithome.com.tw/upload/images/20221015/20152709zu8oJo6beu.png
DashBoard儀表板控制畫面
https://ithelp.ithome.com.tw/upload/images/20221015/20152709hiKQeUCzCG.png

YES,I CAN。
終於完成連續三十天發文挑戰,歡迎各位高手不吝給予指正與建議,感謝大家。


上一篇
第二十九堂課停課不停學之Webduino線上模擬器(溫溼度+光敏可變電阻)
系列文
每天五分鐘Webduino Smart開發應用好好玩30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言